<style>
    .major {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
    }
    .major .inside {
        width: 1000px;
        height: 100%;
        margin: 0 auto;
    }
    .major .inside .major-title {
        width: 100%;
        font-size: 16px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e8e8e8;
    }
    .major .inside .major-title .projectName {
        width: 50%;
        line-height: 40px;
        text-align: center;
    }
    .major .inside .major-title .projectName:nth-of-type(1) {
        width: 50%;
        border-right: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .major .inside .major-title .projectName:nth-of-type(1) .search {
        width: 250px;
        height: 100%;
    }
    .major .content {
        width: 100%;
        height: calc(100% - 40px);
        padding-top: 10px;
    }
    .major .patientList {
        width: 50%;
        height: 100%;
        overflow: auto;
        display: inline-block;
        vertical-align: top;
    }
    .major .projectList {
        width: 49%;
        height: 100%;
        overflow: auto;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }
    .major .projectList .active {
        background-color: #e8e8e8;
    }
    .major .projectList .projectWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .major .projectList .projectRow {
        display: inline-block;
        margin-right: 15px;
    }
    .major .projectList .projectRow:nth-of-type(3n) {
        margin-right: 0;
    }
    .major .patientList .patientRow {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-sizing: border-box;
    }
    .major .patientList .active {
        background-color: #e8e8e8;
    }
    .major .patientList .patientRow .name {
        font-size: 14px;
        width: 30%;
        height: 100%;
        line-height: 50px;
        text-align: center;
    }
    .major .patientList .patientRow:hover {
        transition: all .2s linear;
        background-color: #e8e8e8;
    }
    .major .patientList .patientRow .project {
        width: 70%;
    }
    .major .patientList .patientRow .green {
        color: #67C23A;
    }
    .major .patientList .patientRow .grey {
        color: #909399;
    }
    .major .el-checkbox {
        margin-right: 0 !important;
    }
    .major .save {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }
    .finish.is-disabled {
        border-color: #67C23A !important;
    }
    .finish.is-disabled .el-checkbox__label {
        color: #67C23A !important;
        font-size: 14px !important;
    }
    .finish.is-disabled .el-checkbox__inner {
        border-color: #67C23A !important;
    }
    .finish.is-disabled .el-checkbox__inner::after {
        border-color: #67C23A !important;
    }
</style>
<body>
<div class="major">
    <div class="inside">
        <div class="major-title">
            <div class="projectName">
                <div>今日患者列表</div>
                <div class="search">
                    <el-input v-model="search" size="mini" placeholder="通过姓名搜索" class="search-input" suffix-icon="el-icon-search" />
                </div>
            </div>
            <div class="projectName">项目（多选）</div>
        </div>
        <div class="content">
            <div class="patientList">
                <div :class="['patientRow', current.ob && current.ob.patientId == item.patientId ? 'active' : '' ]"
                     v-for="(item, index) in patientList" :key="index" @click="handleClick(item, index)">
                    <div class="name">{{ item.patientName }}</div>
                    <div :class="['project', item.project.length != 0 ? 'green' : 'grey' ]">
                        <!-- {{ getProject() }} -->
                    </div>
                </div>
                <div class="patientRow" v-if="patientList.length == 0">暂无患者列表</div>
            </div>
            <div class="projectList">
                <template v-if="current.ob">
                    <div class="projectRow"  v-for="(item, index) in projectList">
                        <el-checkbox size="small" :class="[ item.finished ? 'finish' : '' ]" :disabled="item.finished || item.limited" style="width: 150px;text-align: left;"
                                     :key="index" v-model="item.selected" @change="handleChangeCheckBox"
                                     :label="item.name" border />
                    </div>
                </template>
                <div class="projectRow" style="color: #999;" v-else>
                    请先选择患者
                </div>
            </div>

        </div>
        <el-button type="primary" class="save" @click="saveAnswer(true)">保存</el-button>
    </div>
</div>
</body>

<script>
    require([
        'jquery',
        'bbcare'
    ], function ($, $bb) {

        var URL = $bb.baseUrl('followup')

        var vm = new Vue({
            el: '.major',
            data: {
                patientList: [],
                patientSrouceList: [],
                projectList: [],
                current: {
                    ob: null,
                    index: 0
                },
                is_change: false,
                search: ''
            },
            watch: {
                search (str) {
                    if (str == '') {
                        this.patientList = JSON.parse(JSON.stringify(this.patientSrouceList))
                    } else {
                        this.patientList = []
                        this.patientSrouceList.forEach(p => {
                            if (p.patientName.indexOf(str) > -1) this.patientList.push(p)
                    })
                    }
                }
            },
            created: function () {
                this.getPatientList()
            },
            methods: {
                handleChangeCheckBox: function () {
                    this.is_change = true
                },
                handleClick: function (row, index) {
                    var that = this
                    for (var i = 0; i < this.projectList.length; i++) {
                        if (this.projectList[i].selected && this.is_change) return this.$confirm(
                            '是否保存 '+ this.current.ob.patientName +' 选择的项目', '提示', {
                                type: 'warning',
                                confirmButtonText: '确认',
                                cancelButtonText: '取消'
                            }).then(function () {
                            that.saveAnswer(row, index)
                        }).catch(function () {
                            that.getNew(row, index)
                        })
                    }
                    this.getNew(row, index)
                },
                getNew: function (row, index) {
                    this.current.ob = row
                    this.current.index = index
                    this.getProjectList()
                },
                saveAnswer: function (row, index) {
                    var data = {
                        patient_id: this.current.ob.patientId,
                        patient_name: this.current.ob.patientName,
                        queue_ids: []
                    }
                    this.projectList.forEach(function (item) {
                        if (item.selected) data.queue_ids.push(item.id)
                    })
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office1/s',
                        data: JSON.stringify({ data: data }),
                        methods: 'POST',
                        success: function (res) {
                            that.$message.success(that.current.ob.patientName + ' 检查项目保存成功')
                            if (!row) that.getNew(row, index)
                            that.is_change = false
                        }
                    })
                },
                /**
                 * 获取当前用户列表
                 */
                getPatientList: function() {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/service/patient/patientOperateListQuery',
                        methods: 'POST',
                        data: JSON.stringify({
                            data: {
                                page: 1,
                                rows: 1000,
                                flag: 0
                            }
                        }),
                        success: function (res) {
                            res.data.rows.forEach(function (item) {
                                item.project = []
                            })
                            that.patientList = res.data.rows
                            that.patientSrouceList = JSON.parse(JSON.stringify(res.data.rows))
                        }
                    })
                },
                /**
                 * 获取检查项目的列表
                 */
                getProjectList: function () {
                    var that = this
                    $bb.ajax({
                        url: URL + 'followup/queuing/office1/q?patient_id=' + this.current.ob.patientId,
                        methods: 'POST',
                        success: function (res) {
                            that.projectList = res
                            that.is_change = false
                        }
                    })
                },
                getProject: function () {
                    var result = []
                    this.projectList.forEach(item => {
                        if (item.selected) result.push(item.name)
                })
                    return result.join('、')
                }
            }
        })

    })
</script>